<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格<br /><br/>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
            type="primary"
            icon="el-icon-delete"
            class="handle-del mr10"
            @click="delAllSelection"
        >批量删除</el-button>
        <el-input v-model="select_word" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <el-table
          :data="data"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="用户名" align="center"></el-table-column>
        <el-table-column label="班级" prop="class" align="center">
          <template slot-scope="scope">{{scope.row.class}}</template>
        </el-table-column>
        <el-table-column label="个人照片" align="center">
          <template slot-scope="scope">
            <el-image
                class="table-td-thumb"
                :src="scope.row.thumb"
                :preview-src-list="[scope.row.thumb]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.state === '在校'?'success':(scope.row.state==='离校'?'danger':'')"
            >{{scope.row.state}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="入学时间" align="center"></el-table-column>
        
        <el-table-column label="个人能力图" width="180" align="center">
          <template slot-scope="scope">
            <el-popover placement="left" width="1000" trigger="click">
              <el-button slot="reference"
                  type="text"
                  icon="el-icon-s-custom"
                  @click="handleDrawer(scope.$index, scope.row)" 
              >查看</el-button>
                <echarts />
            </el-popover>
          </template>            

            <!-- <el-popover :visible.sync="drawer" size=80%>
              <echarts/>
            </el-popover> -->

        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    <!-- layout="total, prev, pager, next" -->
    <!-- :current-page="query.pageIndex" -->
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout = "total,prev,pager,next"
          :page-size="pageSize"
          :total="tableData.length"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
    </el-dialog>
    <el-button class="el-btn" @click="showForm">添加信息</el-button><br><br>
    <div style="margin: 20px;"></div>
    <el-card v-show="show">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="学生姓名">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="formLabelAlign.region" placeholder="请选择班级">
            <el-option label="软件工程四班" value="004"></el-option>
            <el-option label="软件工程三班" value="003"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formLabelAlign.type" placeholder="请确定在校情况">
            <el-option label="在校" value="inschool"></el-option>
            <el-option label="离校" value="leftschool"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入学时间">
          <span class="demonstration"></span>
          <el-date-picker
              v-model="formLabelAlign.time"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="个人照片上传">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="formLabelAlign.imageUrl" :src="formLabelAlign.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { fetchData } from '../../api/user.js';
import echarts from "@/views/echarts/index";
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        address: '',
        name: '',
      },
      pageSize: 10, // 分页每页大小
      currentPage: 1, // 当前页
      show: false,
      tableData: [], // 学生表数据
      tempData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      drawer: false, // 能力图
      form: {},
      idx: -1,
      id: -1,
      labelPosition: 'left',
      select_word: '', // 搜索的学生名
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        address: '',
        time:'',
        imageUrl: ''
      }
    };
  },
  created() {
    this.getData();
  },
  components: {
    echarts,
  },
  watch: {
    //搜索框里面的内容发生变化的时候，搜索结果table列表的内容跟着它的内容发生变化
    select_word: function() {
      if(this.select_word == ''){
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for(let item of this.tempData) {
          if(item.name.includes(this.select_word)){
            this.tableData.push(item);
          }
        }
      }
    }
  },
  computed: {
    //计算当前搜索结果表里的数据
    data(){
        return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize)
    }
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.tableData = [];
      this.tempData = [];
      fetchData(this.query,{
      }).then(res => {
        console.log(res);
        this.tableData = res.data.list;
        this.tempData = res.data.list;
        this.currentPage = 1;
      });
    },
    // 触发搜索按钮
    handleSearch() {},
    // 删除操作
    handleDelete(index, row) {
      console.log(row)
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
      .then(() => {
        this.$message.success('删除成功');
        this.tableData.splice(index, 1);
      })
      .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = '';
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' ';
      }
      this.$message.error(`删除了${str}`);
      this.multipleSelection = [];
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 
    handleDrawer(index, row) {
      console.log(index)
      console.log(row)
      this.idx = index;
      this.form = row;
      this.drawer = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange(val) {
      this.currentPage = val; 
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    showForm() {
      this.show = !this.show
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.el-btn {
  float:right;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
